import { ReactElement, useState, FC } from 'react'
import { EditOutlined } from '@ant-design/icons'
import style from './index.module.less'
import classNames from 'classnames'

interface Props {
  label: string
  value: string | number
  Modal?: FC<{visible: boolean, hide: () => void}>
}

function Main ({ label, value, Modal }: Props): ReactElement {
  const [visible, setVisible] = useState(false)
  return (
    <div className={classNames(style.item, { [style.modifiable]: Modal !== undefined })}>
      <span className={style['item-label']}>{label}</span>
      <span className={style['item-value']}>{value}</span>
      {Modal !== undefined && <a className={style['modify-btn']} onClick={() => setVisible(true)}><EditOutlined /></a>}
      {Modal !== undefined && <Modal visible={visible} hide={() => setVisible(false)} />}
    </div>
  )
}

export default Main
